<!--小额批量代收业务付款复核一览-->
<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1024px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="formData" :model="formData" label-width="140px">
      <!-- 基本信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>基本信息</span>
        </div>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="交易流水号" prop="bepsId">
              <el-input v-model="formData.bepsId" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报文标识号" prop="communiStatus">
              <el-input v-model="formData.ServProcessCode" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="批序号" prop="batchNo">
              <el-input v-model="formData.batchNo" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="CPG日期" prop="cpgdate">
              <el-date-picker
                v-model="formData.cpgdate"
                style="width: 100%"
                type="date"
                value-format="yyyyMMdd"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作日期" prop="workdate">
              <el-date-picker
                v-model="formData.workdate"
                style="width: 100%"
                type="date"
                value-format="yyyyMMdd"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="来往账标识" prop="drct">
              <el-select v-model="formData.drct" disabled>
                <el-option label="2-来账" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务类型" prop="bizTypeCode">
              <el-select v-model="formData.bizTypeCode" disabled>
                <el-option label="E101-定期代付" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="货币种类" prop="curcd">
              <el-input v-model="formData.curcd" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总金额" prop="totAmount">
              <el-input v-model="formData.totAmount" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人数目" prop="payeeNum">
              <el-input v-model="formData.payeeNum" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回执期限" prop="returnDate">
              <el-input v-model="formData.returnDate" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="转发付款方日期" prop="transSenderdate">
              <el-date-picker
                v-model="formData.transSenderdate"
                style="width: 100%"
                type="date"
                value-format="yyyyMMdd"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转发收款方日期" prop="transReceiverdate">
              <el-date-picker
                v-model="formData.transReceiverdate"
                style="width: 100%"
                type="date"
                value-format="yyyyMMdd"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="协议号" prop="protoId">
              <el-input v-model="formData.protoId" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核验标识" prop="checkId">
              <el-select v-model="formData.checkId" disabled>
                <el-option label="CE01-已核验" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款方动账标识" prop="payerAccChgFlg">
              <el-select v-model="formData.payerAccChgFlg" disabled placeholder="付款方动账标识">
                <el-option label="CE01-已核验" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扣款通知编号" prop="dbtNo">
              <el-input v-model="formData.dbtNo" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收款方动账标识" prop="payeeAccChgFlg">
              <el-select v-model="formData.payeeAccChgFlg" disabled placeholder="收款方动账标识">
                <el-option label="CE01-已核验" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入账通知编号" prop="crdNo">
              <el-input v-model="formData.crdNo" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="payeeAccChgFlg">
              <el-input v-model="formData.payeeAccChgFlg" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地域标识" prop="regionid">
              <el-select v-model="formData.regionid" disabled placeholder="地域标识">
                <el-option label="CE01-已核验" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="特约委收种类代码" prop="spTypeCode">
              <el-input v-model="formData.spTypeCode" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款行行号" prop="payerBrno">
              <el-input v-model="formData.payerBrno" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款行行名" prop="payerBrname">
              <el-input v-model="formData.payerBrname" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款清算行行号" prop="payerStBrno">
              <el-input v-model="formData.payerStBrno" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款清算行行名" prop="payerStBrname">
              <el-input v-model="formData.payerStBrname" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款人账号" prop="payerActno">
              <el-input v-model="formData.payerActno" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款人名称" prop="payerName">
              <el-input v-model="formData.payerName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 付款人信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>
        <el-row>
          <el-col :span="3" :offset="22" class="menu-tree">
            <svg-icon icon-class="down_circle" className="menu-tool-btn" />
            <svg-icon icon-class="search-circle" className="menu-tool-btn" />
            <svg-icon icon-class="search-circle_1" className="menu-tool-btn" />
            <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
          </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%; margin-top: 0px" height="200px">
          <el-table-column prop="dtlNo" label="明细标识号" align="center" width="200" sortable></el-table-column>
          <el-table-column prop="payeeActno" label="付款人账号" align="center" sortable width="200"></el-table-column>
          <el-table-column prop="payeeName" label="付款人名称" align="center" sortable width="150"></el-table-column>
          <el-table-column
            prop="bizCtgyCode"
            label="业务种类"
            align="center"
            sortable
            width="150"
          ></el-table-column>
          <el-table-column
            prop="payeeBrno"
            label="付款行行号"
            align="center"
            sortable
            width="200"
          ></el-table-column>
          <el-table-column
            prop="payeeBrname"
            label="付款行行名"
            align="center"
            sortable
            width="200"
          ></el-table-column>
          <el-table-column
            prop="amount"
            label="金额"
            align="center"
            sortable
            width="150"
          ></el-table-column>
          <el-table-column fixed="right" class="table-header-cell" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click.native.prevent="detailRow(scope.$index, tableData)" type="text" size="small">
                明细
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="10"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="20"
            ></el-pagination>
          </div>
        </el-row>
      </el-card>
    </el-form>

    <el-row slot="footer">
      <el-col :span="2" :offset="11">
        <el-button @click="close">关闭</el-button>
      </el-col>
    </el-row>
    <collect-payment-handel-check-detail-dialog ref="collectPaymentHandelCheckDetailDialog"></collect-payment-handel-check-detail-dialog>
  </el-dialog>
</template>

<script>
import collectPaymentHandelCheckDetailDialog from "./handelCheckDetail";
export default {
  name: "collectPaymentCheckDetailDialog",
  components: {
    collectPaymentHandelCheckDetailDialog,
  },
  data() {
    return {
      currentPage4: 1, // 分页
      title: "",
      openState: false, // 是否显示弹出层
      formData: {
        bepsId: "BEPS2023081000504177", // 交易流水号
        MessageNum: "2023080800030359", // 报文标识号
        batchNo: "0000001", // 批序号
        cpgdate: "2023-11-11", // CPG日期
        workdate: "2023-11-11", // 工作日期
        drct: "2", // 来往账标识
        bizTypeCode: "1", // 业务类型
        curcd: "CNY", // 货币种类
        totAmount: "3.14", // 总金额
        payeeNum: "1", // 收款人数目
        returnDate: "6", // 回执期限
        transSenderdate: "2023-11-11", // 转发付款方日期
        transReceiverdate: "2023-11-11", // 转发收款方日期
        protoId: "12345678", // 协议号
        checkId: "1", // 核验标识
        payerAccChgFlg: "", // 付款方动账标识
        dbtNo: "", // 扣款通知编号
        payeeAccChgFlg: "", // 收款方动账标识
        crdNo: "", // 入账通知编号
        uniformScCode: "", // 统一社会信用代码
        regionid: "", // 地域标识
        spTypeCode: "", // 特约委收种类代码

        payerBrno: "313290040014", // 付款行行号
        payerBrname: "中国工商银行", // 付款行行名
        payerStBrno: "313301008887", // 付款清算行行号
        payerStBrname: "中国工商银行", // 付款清算行行名
        payerActno: "20110129wenwang", // 付款人账号
        payerName: "李娜", // 付款人名称
      },
      tableData: [
        {
          dtlNo: "2023080800030360", // 明细标识号
          payeeActno: "20110129guanjun", // 收款人账号
          payeeName: "克里斯特尔斯", // 收款人名称
          bizCtgyCode: "00100-电费", // 业务种类
          payeeBrno: "313290040014", // 收款行行号
          payeeBrname: "中国工商银行", // 收款行行名
          amount: "3.14", // 金额
        },
      ],
    };
  },

  methods: {
    handleClose() {
      this.openState = false;
    },
    // 搜索
    search(data) {
      console.log(data, "data");
      console.log("搜索");
    },

    // 重置
    reset() {
      this.resetForm("formData");
    },

    show() {
      this.title = "小额批量代付业务收款复核一览";
      this.openState = true;
    },

    close() {
      this.openState = false;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    detailRow() {
      console.log("详细");
      console.log("this.$refs.collectPaymentHandelCheckDetailDialog", this.$refs.collectPaymentHandelCheckDetailDialog);
      this.$refs.collectPaymentHandelCheckDetailDialog.show();
    },
  },
};
</script>

<style scoped>
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000 !important;
}
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -5px;
  margin-left: 92%;
  font-size: 28px;
}
.block {
  float: right;
  margin-top: 10px;
}
</style>
